<template>
  <div class="signinform">
    <h1 class="text-pop-up-top">Welcome to DMS</h1>
    <!-- container -->
    <div class="mainContainer">
      <!-- main content -->
      <div class="w3l-form-info">
        <div class="w3l_form">
          <div class="left_grid_info">
            <img src="../assets/image.svg" alt="" />
          </div>
        </div>
        <div class="w3_info">
          <el-form :rules="rules" ref="loginForm" :model="loginForm">
            <h3 class="loginTitle">欢迎登录</h3>

            <el-form-item prop="mobile">
              <el-input type="text" autocomplete="false" v-model="loginForm.mobile" placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" autocomplete="false" v-model="loginForm.password" placeholder="请输入密码"
                show-password>
              </el-input>
            </el-form-item>

            <el-button type="primary" style="width: 100%; margin: 20px 0px" @click="submitLogin"
              :loading="isLoading">Login</el-button>
            <el-button type="success" @click="regist" style="width: 100%;margin-left: 0px;">Sign Up</el-button>
          </el-form>
        </div>
      </div>
      <!-- //main content -->
    </div>
    <!-- //container -->
    <!-- footer -->
    <div class="footer">
      <p>&copy; 2023 All Rights Reserved | Design by CO.cool</p>
    </div>
    <!-- footer -->
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  name: "Login",
  data() {
    return {
      // captchaUrl: "",
      loginForm: {
        // mobile: "13568387255",
        // password: "2827528315",
        mobile: "18203005570",
        password: "1234567890",
        // mobile: "",
        // password: "",
      },
      rules: {
        mobile: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      isLoading: false,
    };
  },
  methods: {
    regist() {
      this.$router.push("/Register");
    },
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.isLoading = true;
          let salt = "1a2b3c4d";
          let str =
            "" +
            salt.charAt(0) +
            salt.charAt(2) +
            this.loginForm.password +
            salt.charAt(5) +
            salt.charAt(4);
          //请求后端登录接口
          let param = {
            "mobile": this.loginForm.mobile,
            "password": md5(str)
          };
          // param.append("mobile", this.loginForm.mobile);
          // param.append("password", md5(str));
          this.$https({
            method: 'get',
            url: '/login',
            params: param
          }).then((res) => {
            if (res.data.code == 200) {
              sessionStorage.setItem('userInfo', JSON.stringify(res.data.data));
              sessionStorage.setItem('headImg', res.data.data.profile);
              sessionStorage.setItem('token', res.data.data.token);
              //页面跳转
              setTimeout(() => {
                this.$message.success("登录成功！");
                this.$router.replace("/Home/index"); //replace不能进行网页后退 push可以进行网页后退
              }, 1000);
            } else {
              this.$message.error("手机号或密码错误！");
            }
          }).catch(e => {
            this.$message.error(e);
            this.isLoading = false;
          });
        } else {
          this.$message.error("请输入所有字段");
          return false;
        }
      });
    },
    loginUser(e) {
      var key = window.event.keyCode ? window.event.keyCode : window.event.which
      if (key === 13) {
        this.submitLogin();
        e.preventDefault(); //取消浏览器原有的操作
      }
    }
  },
  created() {
    document.addEventListener('keydown', this.loginUser);
  },
  destroyed() {
    document.removeEventListener('keydown', this.loginUser);
  }
};
</script>

<style scoped>
.register {
  margin-top: 20px;
}

.loginTitle {
  margin: 20px auto 50px auto;
  text-align: center;
  font-size: 3rem;
  background: linear-gradient(90deg, #dad1f8, #333);
  -webkit-text-fill-color: white;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
}

/* 格式化 */
.signinform {
  width: 100vw;
  justify-content: center;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  min-height: 100vh;
  /* 背景渐变色 - 原理2 */
  background: linear-gradient(-45deg, #b09ee9, #87bdd1, #a6d0ed, #b2a6e8,
    #c4b7d7);
  /* 背景尺寸 - 原理3 */
  background-size: 600% 600%;
  /* 循环动画 - 原理4 */
  animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.w3_info {
  /* flex-basis: 50%;
  -webkit-flex-basis: 50%; */
  box-sizing: border-box;
  padding: 3rem 3rem;
  background: #fff;
  min-width: 30rem;
  border-radius: 0 1rem 1rem 0;
}

.left_grid_info {
  padding: 5rem 0;
}

.left_grid_info img {
  max-width: 30rem;
}

.w3l-form-info {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 40px 0;
  box-shadow: 2px 9px 49px 10px rgba(0, 0, 0, 0.362);
  border-radius: 1rem;
}


.w3l_form {
  padding: 0px;
  flex-basis: 50%;
  -webkit-flex-basis: 50%;
  background: #dad1f8;
  border-radius: 1rem 0 0 1rem;
}

.mainContainer {
  max-width: 890px;
  margin: 0 auto;
}

.text-pop-up-top {
  margin-bottom: 0;
  font-size: 5rem;
  background: linear-gradient(90deg, #dad1f8, #66b1ff);
  -webkit-text-fill-color: white;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
  text-shadow: 0px 9px 10px rgba(0, 0, 0, 0.362);
}

/* //简单适配移动端 */
@media screen and (max-width: 450px) {
  .signinform {
    width: 1000px;
    justify-content: center;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    min-height: 100vh;
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-45deg, #b09ee9, #87bdd1, #a6d0ed, #b2a6e8,
      #c4b7d7);
    /* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
    animation: gradientBG 5s ease infinite;
  }
}
</style>
